<template>
    <div class="order-list-root">
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="订单编号" prop="orderCode">
                <el-input v-model="form.orderCode" placeholder="请输入订单编号" clearable @input="getOrderList"></el-input>
            </el-form-item>
            <el-form-item label="商品编号" prop="goodsCode">
                <el-input v-model="form.goodsCode" placeholder="请输入商品编号" clearable @input="getOrderList"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable @input="getOrderList" @keyup.enter.native="getOrderList"></el-input>
            </el-form-item>
            <el-form-item label="商家名称" prop="merchants">
                <el-input v-model="form.merchants" placeholder="请输入商家名称" clearable @input="getOrderList"></el-input>
            </el-form-item>
            <el-form-item label="订单日期" prop="dateTime">
                <el-date-picker v-model="form.dateTime" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" @change="getOrderList"
                        start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">>
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getOrderList">查询</el-button>
                <el-button @click="resetForm('queryRef')">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="addOrder">新增订单</el-button>
            </el-form-item>
        </el-form> <!--// 条件搜索表单-->

        <!--订单列表-->
        <el-table
                :data="orderList"
                style="width: 100%"
                height="540">
            <el-table-column label="" type="selection" width="55"></el-table-column>
            <el-table-column prop="orderCode" label="订单编号" width="270" show-overflow-tooltip></el-table-column>
            <!--<el-table-column prop="goodsCode" label="商品编码" width="180" show-overflow-tooltip></el-table-column>-->
            <el-table-column prop="orderPrice" label="订单总价" width="120"></el-table-column>
            <el-table-column prop="merchants" label="商家" width="120"></el-table-column>
            <el-table-column prop="goodsNames" label="商品名称" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            @click="handleDetail(scope.$index, scope.row)">查看</el-button>
                    <!--<el-button-->
                    <!--        size="mini"-->
                    <!--        type="success"-->
                    <!--        @click="handleAdd(scope.$index, scope.row)">进货</el-button>-->
                </template>
            </el-table-column>
        </el-table><!--/ 订单列表-->

        <!--分页插件-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParam.pageNum"
                    :page-sizes="pageParam.sizes"
                    :page-size="pageParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParam.total">
            </el-pagination>
        </div><!--/ 分页插件-->

        <!--新增订单对话框-->
        <OrderAdd v-if="addOrderFlag" @close="addOrder"></OrderAdd>

        <!--订单详情-->
        <OrderDetail v-if="orderDetailFlag" :order="orderDTO" @close="handleDetail"></OrderDetail>
    </div>
</template>

<script>
import API from '@/api/api';
import OrderAdd from "../../../components/orderList/OrderAdd";
import OrderDetail from "../../../components/orderList/OrderDetail";
export default {
    name: "OrderList",
    components: {
        OrderAdd, OrderDetail,
    },
    data() {
        return {
            // 新增订单标志位
            addOrderFlag: false,
            // 订单详情标志位
            orderDetailFlag: false,
            // 用于组件之间的数据传输
            orderDTO: {},
            // 订单列表
            orderList: [],
            // 条件查询-展示的表单
            form: {
                orderCode: '',
                goodsCode: '',
                goodsName: '',
                merchants: '',
                dateTime: '',
            },
            // 分页参数
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                sizes: [5, 10, 50, 100, 200],
            },
        }
    },
    mounted() {
        this.getOrderList();
    },
    methods: {
        // 查询订单列表
        getOrderList() {
            let url = API.order.selectList;
            let param = JSON.parse(JSON.stringify(this.form));
            if (this.form.dateTime && this.form.dateTime.length > 0) {
                param.startTime = this.form.dateTime[0];
                param.endTime = this.form.dateTime[1];
                // // 处理只查询一天
                // if (param.startTime.split(' ')[1] === param.endTime.split(' ')[1]) {
                //     param.startTime = param.startTime.split(' ')[0];
                //     param.endTime = param.endTime.split(' ')[0];
                // }
            }
            delete param.dateTime;
            console.log(param, '查询列表参数---------------------');
            this.$get(url, param).then( res => {
                let data = res.data;
                if ( data.success) {
                    // this.$message.success("~~~!");
                    this.orderList = data.data.list;
                    this.pageParam.total = data.data.total;
                }
            }).catch( err => {
                this.$message.error("请求失败!");
            })
        },
        // '新增订单' 按钮
        addOrder() {
            this.addOrderFlag = !this.addOrderFlag;
            if (!this.addOrderFlag) {
                this.getOrderList();
            }
        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
            this.getOrderList();
        },
        // 分页
        handleSizeChange(val) {
            this.pageParam.pageSize = val;
            this.getTypeList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageParam.pageNum = val;
            this.getTypeList();
            console.log(`当前页: ${val}`);
        },
        // 查看详情
        handleDetail(index, row) {
            console.log(row, '${index}---${row}');
            this.orderDetailFlag = !this.orderDetailFlag;
            this.orderDTO = row;
        }
    }
}
</script>

<style lang="scss" scoped>
    /deep/.el-input__inner{
        height: 35px;
        line-height: 20px;
        /*width: 78%;*/
    }
</style>
